js dom

每个Window对象都有一个document属性指向Document
Document对象表示窗口的内容.

  1. 获取文档元素
    //ID
    //返回element
    document.getElementById(‘ID_K’);
    //Name
    //返回NodeList
    document.getElementsByName(“name_K”);
    //根据标签
    //返回HTMLCollection 在<>第六版第367页中写的是返回NodeList,但是查了官网API是返回HTMLCollection的.
    //因为HTML不区分大小写,所以这个也不区分大小写.
    var first_p = document.getElementsTagName(“p”)[0];
    first_p_span = first_p.getElementsTagName(“span”);
    //通过Class
    document.getElementsByClassName(“K container”);
    //通过CSS选择器 返回NodeList
    document.querySelectorAll(“#K div”);
    document.querySelector(“#K div”);
    //返回第一个匹配的.

HtmlDocument还定义了一些快捷的访问方式.
只读的img,form,a(包含href属性的)等元素的集合.(返回HTMLCollection)
因为在Document对象中为form img iframe applet embed ojbect元素设置name属性,既在Document对象中创建以此name属性值为名字的属性.
不太建议这样的使用方法,以下都返回的是HTMLColection
document.images;
//假如women定义了一个ID/name属性为K_404的form
document.forms.K_404;
//or
document.K_404; document.links

  1. Node属性
  2. parentNode : 该节点的父节点,类似Document对象此属性为null.
  3. childNode : 只读的类数组对象(NodeList对象),实时表示
  4. firstChild lastChild
  5. nextSibling previoursSibling

  6. nodeType : 节点类型

  7. 9表示Document节点

  8. 1表示Element节点
  9. 3表示Text节点
  10. 8表示Comment节点

  11. 11表示DcoumentFragment节点

  12. nodeValue : Text节点/Commetn节点的文本内容.

  13. nodeName : 元素的标签名,以大写形式表示

  1. HTML属性作为Element的属性

    1
    var image = document.getElementByID("K_404");
var iamge_url = "../image/404_K.jpg";
///关键字 会默认前面加html 除class ,其他驼峰
document.getElementsByTagName('lable')[0].htmlFor = "404_K";
document.getElementById('K_404').className = "container";

  2. 获取和设置非标准HTML属性Element定义的方法

  3. setAttribute

  4. getAttribute
  5. hasAttribute
  6. removeAttribute
1
var image = document.images[0];
var width = parseInt("iamge.getAttribute('width')");
image.setAttribute('class',"container");

  1. data- 数据集属性因为在第四节中定义了非标准的HTML属性,导致HTML不再是合法的HTML,所以
    在HTML5新增了任意以data-为前缀的小谢属性名字都是合法的,并且HTML也是合法的
    HTML5在Element对象定义了dataset属性,指向一个对象,它的各个属性对应于去掉前缀data-属性.

    1
    <span class="sparklinke" data-ymin="0" data-ymax="10">
     1 1 1 2 2 3 4 5 5 4 3 5 6 7 7 4 2 1
</span>     

var spanrkline = document.getElementsByClassName('sparkline');
for(var i=0,length = sparklines.length;i< length ; i++){
	var dataset =sparkline[i].dataset;
	var ymin =parseFloat(dataset.ymin);
	var ymax =parseFloat(dataset.ymax);
   ...
}

  2. 作为Attr节点的属性Node定义了attributes属性.非Element对象,该属性为null
    对应Element对象,attributes属性是只读的类数组对象.它代表元素的所有属性,并且是实时的.

    1
    document.body.attributes[0]
document.body.attributes.bgcolor
document.body.attributes["onload"]

当索引attributes对象得到的都是Attr对象,Attr有name和value属性

  1. 作为HTML的元素内容
  2. innerHTML
  3. outerHTML
    outerHTML返回标签的开始标签和结束标签,还有内容.当替换该属性时,标签也被替换
  1. insertAdjacenHTML
    该方法在HTML5标准化
    有两个参数
  1. 为依赖的参数位置
    beforebegin afterbegin beforeend afterend
    1
    2This3
    4

以上的1234和参数插入的未知对应

  1. 为HTML标记字符串
  1. 作为纯文本的元素内容
    1
    var k = document.getElementsByTagNames('p')[0];
var text = k.textContent;

textContent和innerText的区别

  1. textContent只是把Text节点串联在一起.
  2. ineerText不返回